<template>
  <card>
    <b-row align-v="center" slot="header">
      <b-col cols="8">
        <!-- 个人信息 -->
        <h3 class="mb-0">个人信息</h3>
      </b-col>
      <b-col cols="4" class="text-right">
        <!-- 设置&保存 -->
        <button class="btn btn-sm btn-primary" @click="submit()">
          设置&保存
        </button>
      </b-col>
    </b-row>

    <b-form>
      <!-- 用户基本资料 -->
      <h6 class="heading-small text-muted mb-4">基本资料</h6>

      <div class="pl-lg-4">
        <b-row>
          <b-col lg="4">
            <!-- 昵称 -->
            <label class="form-control-label">昵称</label>
            <el-input
              type="text"
              placeholder="昵称"
              clearable
              v-model="user.username"
            >
            </el-input>
          </b-col>
          <b-col lg="4">
            <!-- 专业 -->
            <label class="form-control-label">专业</label>
            <el-input
              type="text"
              placeholder="专业"
              v-model="user.major"
              :disabled="true"
            >
            </el-input>
          </b-col>
          <!-- 学号 -->
          <b-col lg="4">
            <label class="form-control-label">学号</label>
            <el-input
              type="text"
              placeholder="学号"
              v-model="user.id"
              :disabled="true"
            >
            </el-input>
          </b-col>
        </b-row>
        <br />
        <b-row>
          <!-- 真实姓名 -->
          <b-col lg="4">
            <label class="form-control-label">真实姓名</label>
            <el-input
              type="text"
              placeholder="真实姓名"
              v-model="user.realname"
              :disabled="true"
            >
            </el-input>
          </b-col>
          <!-- 行政班级 -->
          <b-col lg="4">
            <label class="form-control-label">行政班级</label>
            <el-input
              type="text"
              placeholder="行政班级"
              v-model="user.class"
              :disabled="true"
            >
            </el-input>
          </b-col>
          <!-- 邮箱地址 -->

          <b-col lg="4">
            <!-- <base-input
              type="email"
              label="邮箱地址"
              placeholder="xxx@email.com"
              v-model="user.email"
            >
            </base-input> -->
            <label class="form-control-label">邮箱地址</label>
            <el-input
              type="email"
              v-model="user.email"
              placeholder="xxx@email.com"
              clearable
              @change="checkEmail"
            >
            </el-input>
            <div class="warning">{{ errorEmailText }}</div>
          </b-col>
        </b-row>
      </div>
      <hr class="my-4" />

      <!-- 联系方式 -->
      <h6 class="heading-small text-muted mb-4">联系方式</h6>

      <div class="pl-lg-4">
        <b-row>
          <b-col md="8">
            <label class="form-control-label">联系地址</label>
            <el-input
              type="text"
              placeholder="请输入详细地址"
              clearable
              v-model="user.address"
            >
            </el-input>
          </b-col>
          <b-col lg="4">
            <label class="form-control-label">手机号码</label>
            <el-input placeholder="手机号码" clearable v-model="user.phone">
            </el-input>
          </b-col>
        </b-row>
        <br />
        <b-row>
          <b-col md="12">
            <label class="form-control-label">个人宣言</label>
            <el-input
              type="textarea"
              autosize
              placeholder="个人宣言"
              v-model="user.saying"
            >
            </el-input>
          </b-col>
        </b-row>
        <br />
      </div>
    </b-form>
  </card>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      user: {
        username: "",
        realname: "",
        email: "",
        id: "",
        major: "",
        class: "",
        phone: "",
        address: "",
        saying: "",
      },
      errorEmailText: "",
    };
  },
  methods: {
    loadData() {
      axios({
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
        url: "/student/findStudentByNumber",
        method: "post",
        params: {},
      })
        .then((response) => {
          let user = response.user;
          if (response.status == 0) {
            this.username = user.username;
            this.realname = user.realname;
            this.email = user.email;
            this.id = user.id;
            this.major = user.major;
            this.class = user.class;
            this.phone = user.phone;
            this.address = user.address;
            this.saying = user.saying;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    checkEmail() {
      let rule = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
      let text = "";
      if (!rule.test(this.user.email)) {
        text = "邮箱格式输入有误";
      }
      this.errorEmailText = text;
    },
    submit() {},
  },
};
</script>
<style>
.warning {
  margin-top: 3px;
  font-size: 12px;
  color: #fb6868;
  height: 25px;
}
</style>
